<script lang="ts">
import { defineComponent, ref } from 'vue'
import { onMounted, onUnmounted } from 'vue'
import { getDeta } from '../api/detail'
import { useRoute, useRouter } from 'vue-router'
import { getHomls } from '../api/detail'
import { getUplod } from '../api/detail'
import { useLoginStore } from '../stores/login'
import { useCarStore } from '../stores/shopcar'
import { showImagePreview } from 'vant'

export default defineComponent({
  setup() {
    const route = useRoute()
    const router = useRouter()

    let name = ref(false) //声明一个变量   Genshin

    let main_url: any = ref(false) //商品详情图片

    let price: any = ref(false) //价钱

    let sale_attrs: any = ref(false) //人物

    let size: any = ref(false) //尺寸

    let nameone: any = ref('') //名称一

    let nametwo: any = ref('') //名称二

    let shop_key_one: any = ref('') // 商品款式属性名一

    let shop_key_two: any = ref('') // 商品款式属性名二

    let shop_key: any = ref('') // 最终的商品款式属性名

    let fin_shop: any = ref({}) // 最终的商品款式

    let def_img: any = ref({}) // 商品款式默认图

    let shop_sku: any = ref('') // 商品库存

    let shop_price: any = ref('') // 商品价格

    let shop_style = ref() // 最终的商品名称

    let shop_img: any = ref('') // 最终的商品封面

    let shop_id: any = ref(1) // 最终的商品id

    let carStore: any = useCarStore()

    let is_checked: any = ref(false) // 商品选中

    let ToastFlag: any = ref(false) // 轻提示

    let addShopFlag: any = ref(false) // 登录提示

    let goodsId = ref() // 商品id

    let LoginStore = useLoginStore()

    let shopCarlength = ref()

    //商品详情
    var Deta: any = ref<Array<any>>([])
    const getDetaFun = () => {
      // 传参
      getDeta(route.query.goods_id).then((data: any) => {
        goodsId.value = route.query.goods_id
        console.log(data)
        Deta.value = data.data.goods.detail.banner_url

        def_img.value = data.data.goods.detail.cover_url //商品款式默认图

        main_url.value = data.data.goods.detail.main_url //商品详情图片

        price.value = data.data.goods.detail.price //价钱

        name.value = data.data.goods.detail.name //声明一个变量  文字

        sale_attrs.value = data.data.goods.detail.sale_attrs[0].content //人物

        nameone.value = data.data.goods.detail.sale_attrs[0].name // 名称一

        // 判断是否有第二款式类型
        if (data.data.goods.detail.sale_attrs[1]) {
          size.value = data.data.goods.detail.sale_attrs[1].content // 尺寸

          nametwo.value = data.data.goods.detail.sale_attrs[1].name // 名称二
        }
        // console.log(Deta.value)
      })
    }

    // 预览图
    const watchImg = () => {
      showImagePreview(Deta.value)
    }

    let show: any = ref(false) //商品选择详情

    const count = ref(1) //商品数量

    // 人气好物
    var Homls: any = ref<Array<any>>([])
    const getHomlsFun = () => {
      getHomls().then((data: any) => {
        // console.log(data);
        Homls.value = data.data.list
      })
    }

    //  手办
    var Uplod: any = ref<Array<any>>([])
    const getUplodFun = () => {
      getUplod().then((data: any) => {
        // console.log(data);
        Uplod.value = data.data.list
      })
    }

    //跳转用户评价传参
    const pages = (path: any, goods_id: any) => {
      console.log(goods_id)

      router.push({
        path,
        query: {
          goods_id // 商品id
        }
      })
    }

    //getHomls

    // 选项高亮
    const opcon = (key: any) => {
      let index = sale_attrs.value.findIndex((item: any) => {
        return item.key == key
      })

      sale_attrs.value.filter((item: any) => {
        item.is_chose = true
      })

      sale_attrs.value[index].is_chose = false

      shop_key_one.value = key

      // 判断是否有两种款式类型

      if (shop_key_two.value) {
        shopStyle()
      } else {
        shop_key.value = shop_key_one.value
        getDeta(route.query.goods_id).then((data: any) => {
          if (data.data.goods.detail.skus.hasOwnProperty(shop_key.value)) {
            fin_shop.value = data.data.goods.detail.skus[shop_key.value] // 最终的商品款式

            shop_price.value = data.data.goods.detail.skus[shop_key.value].market_price // 价格

            shop_sku.value = data.data.goods.quantity.sku_quantities[shop_key.value] // 库存

            shop_style.value = fin_shop.value.attr // 款式名称

            shop_img.value = fin_shop.value.cover_url // 款式封面

            shop_id.value = fin_shop.value.id // 款式id

            // console.log(shop_style.value)
          } else {
            return
          }
        })
      }
    }

    // 选项高亮2
    const opcontwo = (key: any) => {
      let index = size.value.findIndex((item: any) => {
        return item.key == key
      })

      size.value.filter((item: any) => {
        item.is_open = false
      })

      size.value[index].is_open = true

      shop_key_two.value = key

      if (shop_key_one.value) {
        shopStyle()
      }
    }

    // 更换商品款式
    const shopStyle = () => {
      shop_key.value = shop_key_one.value + '_' + shop_key_two.value

      getDeta(route.query.goods_id).then((data: any) => {
        fin_shop.value = data.data.goods.detail.skus[shop_key.value]

        shop_price.value = data.data.goods.detail.skus[shop_key.value].market_price // 价格

        shop_sku.value = data.data.goods.quantity.sku_quantities[shop_key.value] // 库存

        shop_style.value = fin_shop.value.attr // 款式名称

        shop_img.value = fin_shop.value.cover_url // 款式封面

        shop_id.value = fin_shop.value.id // 款式id

        // console.log(shop_id.value)
        // console.log(shop_style.value)
        // console.log(shop_price.value)
      })
      // console.log(shop_key.value)
    }

    // 定义一个定时器
    const timer = ref()

    const timerOne = ref()

    const timeTwo = ref()

    //  添加购物车
    const addShopbag = () => {
      if (LoginStore.token) {
        let index = carStore.carList.findIndex((item: any) => {
          return item.id == shop_id.value
        })

        if (index == -1) {
          carStore.carList.unshift({
            name: name.value,
            style: shop_style.value,
            cover_url: shop_img.value,
            price: shop_price.value,
            count: count.value,
            id: shop_id.value,
            is_checked: is_checked.value,
            def_img: def_img.value
          })
        } else {
          carStore.carList[index].count += count.value
        }

        shopCarlength.value = carStore.carList.length

        // carStore.carList = []
        show.value = false

        ToastFlag.value = true

        timer.value = setTimeout(() => {
          ToastFlag.value = false
        }, 1000)

        console.log(carStore)
      } else {
        show.value = false
        addShopFlag.value = true
        timerOne.value = setTimeout(() => {
          addShopFlag.value = false

          timeTwo.value = setTimeout(() => {
            router.push({
              path: '/my'
            })
          }, 500)
        }, 500)
      }
    }

    // 立即购买
    const atOnceBuy = () => {
      if (LoginStore.token) {
        let ids: any = ref([])
        carStore.carList.unshift({
          name: name.value,
          style: shop_style.value,
          cover_url: shop_img.value,
          price: shop_price.value,
          count: count.value,
          id: shop_id.value,
          is_checked: is_checked.value,
          def_img: def_img.value
        })

        ids.value.push(shop_id.value)

        router.push({
          path: '/submit',
          query: {
            ids: ids.value
          }
        })
      } else {
        show.value = false
        addShopFlag.value = true
        timerOne.value = setTimeout(() => {
          addShopFlag.value = false

          timeTwo.value = setTimeout(() => {
            router.push({
              path: '/my'
            })
          }, 500)
        }, 500)
      }
    }

    const goShop = () => {
      router.push({
        path: '/shop'
      })
    }

    onMounted(() => {
      getDetaFun()
      getHomlsFun()
      getUplodFun() //手办
      if (LoginStore.token) {
        shopCarlength.value = carStore.carList.length
      }
    })

    onUnmounted(() => {
      clearTimeout(timer.value)
      timer.value = ''
    })

    return {
      show,
      count,
      Deta, //商品详情
      name, //文字
      main_url, //商品详情图片
      price, //价钱
      sale_attrs, //人物
      addShopbag, //加入购物车
      size, // 尺寸
      opcon, // 选项高亮
      opcontwo,
      nameone, // 名称一
      nametwo, // 名称二
      fin_shop, // 最终款式
      def_img, // 默认图
      shop_sku, // 商品库存
      shop_price, // 商品选择价格
      ToastFlag, // 轻提示
      goShop, // 前往购物车
      addShopFlag,
      shop_style, // 款式名称
      watchImg,
      pages,
      goodsId,
      atOnceBuy,
      shopCarlength
    }
  }
})
</script>

<template>
  <div class="nav">
    <van-sticky :offset-top="0">
      <div class="navbar">
        <div class="button">
          <div @click="$router.back()"><span class="iconfont icon-zuojian"></span></div>
          <div class="font"><span class="iconfont icon-sangedian"></span></div>
        </div>
      </div>
    </van-sticky>

    <van-swipe class="my-swipe" :show-indicators="false">
      <!-- 遍历图片 @click="showImagePreview"-->
      <van-swipe-item v-for="item in Deta" referrerpolicy="no-referrer" :key="item.goods_id">
        <div class="imgs">
          <!-- <img src="../assets/img/15.jpg" alt=""> -->
          <img :src="item" alt="" />
        </div>
      </van-swipe-item>
    </van-swipe>

    <div class="backor">
      <h2 class="boid">
        <div class="mis"><img src="../assets/img/12.jpg" alt="" /></div>
        <span class="mais">
          <!-- 【原神】风花的呼吸主题系列 收藏卡 Genshin -->
          {{ name }}
        </span>
      </h2>
      <div class="cutl">
        <span class="cutl-1">¥</span>

        <span class="cutl-2">
          {{ (price / 100).toFixed() }}
        </span>
      </div>
    </div>

    <div class="white">
      <div class="ite" @click="show = true">
        <span class="exele one-txt-cut">{{ shop_style || '请选择商品款式' }}</span>
        <span class="iconfont icon-arrow-right-bold"></span>
      </div>
    </div>

    <!-- 用户评价  -->
    <div class="appse" @click="pages('/appra', goodsId)">
      <div class="app-no">商品评价</div>
      <span class="iconfont icon-arrow-right-bold"></span>
    </div>

    <div class="bg">
      <div class="mhy-img">
        <div class="ba-img">
          <img src="../assets/img/17.jpg" alt="" />
        </div>

        <div class="ml-10">
          <span>原神万有铺子</span>
          <span class="mi">官方</span>
          <p class="shou">1445件官方商品在售</p>
        </div>

        <div class="toul"><span class="iconfont icon-arrow-right-bold"></span></div>
      </div>
    </div>

    <van-action-sheet v-model:show="show">
      <div class="content">
        <div class="tent">
          <div class="box">
            <img :src="fin_shop.cover_url || def_img" alt="" />
          </div>

          <div class="mhy-price__integer">
            <div class="inter">
              <span class="cutl-1">¥</span>
              <span class="cutl-2">{{
                shop_price ? (shop_price / 100).toFixed() : shop_price || (price / 100).toFixed()
              }}</span>
              <p class="number">剩余 {{ shop_sku || 1808 }} 件</p>
              <p class="mark">已选 角色 规格</p>
            </div>
          </div>
        </div>
        <!-- 商品选项 -->
        <div class="shop_option">
          <!-- 上部分 -->
          <div class="option_top">
            <h5>{{ nameone }}</h5>
            <div class="op_con">
              <span
                :class="{ opcon: !item.is_chose }"
                v-for="item in sale_attrs"
                :key="item.key"
                @click="opcon(item.key)"
                >{{ item.text }}</span
              >
            </div>
          </div>
          <!-- 下部分 -->
          <div class="option_bo">
            <h5>{{ nametwo }}</h5>
            <div class="op_con">
              <span
                :class="{ opcon: item.is_open }"
                v-for="item in size"
                :key="item.key"
                @click="opcontwo(item.key)"
                >{{ item.text }}</span
              >
            </div>
          </div>
        </div>

        <div class="order">
          <div class="der">购买数量</div>
          <div class="amout">
            <van-stepper v-model="count" theme="round" button-size="22" disable-input />
          </div>
        </div>

        <div class="bags">
          <div class="ags" @click="addShopbag">加入购物车</div>
          <div class="gs" @click="atOnceBuy">立即购买</div>
        </div>
      </div>
    </van-action-sheet>

    <!-- 商品详情 -->
    <div class="shop">
      <div class="shoip">商品详情</div>

      <!-- 遍历商品详情图片 -->
      <div class="inimgs" v-for="(item, index) in main_url" :key="index">
        <!-- <img src="../assets/img/19.jpg" alt=""> -->
        <img :src="item" alt="" />
      </div>
    </div>

    <van-sticky :offset-bottom="0" position="bottom">
      <div class="poss">
        <div class="max">
          <div class="tiel"><img src="../assets/img/01.jpg" alt="" style="margin-top: 2px" /></div>
          <div class="tiel">
            <img src="../assets/img01/kefu.png" alt="" style="margin-top: 5px" />
          </div>
          <div class="tiel" @click="goShop">
            <van-badge :content="shopCarlength" color="#ff6d6d" :show-zero="false">
              <img src="../assets/img01/gouwuche.png" alt="" />
            </van-badge>
          </div>

          <div class="lists">
            <button class="contss" @click="show = true">加入购物车</button>
            <button class="cons" @click="show = true">立即购买</button>
          </div>
        </div>
      </div>
    </van-sticky>
  </div>

  <!-- 轻提示 -->
  <div class="showCode" v-if="ToastFlag">加入购物车成功~</div>
  <div class="showCode" v-if="addShopFlag">请先进行登录~</div>
</template>

<style scoped lang="scss">
@import url(../../src/assets/font01/iconfont.css);
@import url(../../src/assets/font/iconfont.css);

// 穿透
.van-image ::v-deep .van-image__img {
  width: 100%;
}

/* 商品选项 */
.shop_option {
  margin-top: 10px;
  // 上部分
  .option_top,
  .option_bo {
    margin-bottom: 8px;
    h5 {
      font-size: 14px;
    }
    .op_con {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      span {
        font-size: 13px;
        padding: 8px 12px;
        border-radius: 8px;
        margin-right: 15px;
        margin-bottom: 8px;
        border: 1px solid #f3f3f4;
        background-color: #f3f3f4;
        &.opcon {
          color: #ff6d6d;
          border: 1px solid #ff6d6d;
          background-color: #fff;
        }
      }
    }
  }
}

//  评价
.appse {
  height: 50px;
  background-color: #ffffff;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.app-no {
  margin: 0 10px;
  line-height: 50px;
  font-size: 15px;
}
.appse .iconfont {
  line-height: 50px;
  padding-right: 13px;
  font-size: 15px;
  color: #c5c5cb;
}

// 轻提示
.showCode {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 10px;
  border-radius: 5px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 99999;
}
.lists {
  width: 80%;
  height: 40px;
  /* background-color: orange; */
  margin-top: 9px;
  margin-left: 10px;
  border-radius: 29px;
  display: flex;
}
.lists .contss {
  width: 101px;
  height: 40px;
  border-radius: 29px;
  background-color: #ffe9e9;
  border: 1px solid #ffffff;
  margin-left: 10px;
  color: #ffa2a2;
}
.lists .cons {
  width: 101px;
  height: 40px;
  border-radius: 29px;
  background-color: #ff6d6d;
  border: 1px solid #ffffff;
  margin-left: 10px;
  color: #ffc6c6;
}
.poss {
  height: 58px;
  width: 100%;
  background-color: #ffffff;
}
.tiel {
  width: 28px;
  height: 28px;
  /* background-color: orange; */
  margin-top: 14px;
  margin-left: 13px;
}
.tiel img {
  width: 100%;
}
.max {
  margin: 0 10px;
  display: flex;
}
.nav {
  width: 100%;
  height: 100%;
  background-color: #f3f3f4;
}

.content {
  padding: 16px 25px 15px;
}

.navbar {
  height: 35px;
  padding-left: 10px;
  background-color: #ffffff;
  border-bottom: 1px solid #f3f3f5;
}

.button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  /* line-height: 35px; */
}

.button .iconfont {
  font-size: 17px;
}

.font {
  width: 46px;
  border-radius: 26px;
  margin-right: 10px;
  padding: 6px 0;
  background-color: #ffffff;
  border: 1px solid #f3f3f5;
}

.font .iconfont {
  margin-left: 15px;
  text-align: center;
}

.imgs {
  width: 100%;
  height: auto;
}

.imgs img {
  width: 100%;
}

.backor {
  width: 100%;
  background: url(../assets/img/16.jpg);
  height: 90px;
}

.backor .boid {
  margin: 0 10px;
  /* height: 40px; */
  /* background-color: red; */
  padding-top: 12px;
}

.mis img {
  width: 100%;
}

.mis {
  height: 21px;
  width: 53px;
  display: inline-block;
}

.boid span {
  font-size: 17px;
}

.boid .mais {
  line-height: 30px;
  vertical-align: bottom;
  font-size: 16px;
}

.cutl {
  margin: 0 10px;
}

.cutl .cutl-1 {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.cutl .cutl-2 {
  font-size: 20px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.white {
  /* height: 36px; */
  margin-top: 19px;
  border-top: 1px solid #fbfbfb;
}

.ite {
  height: 36px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
}

.ite .exele {
  line-height: 36px;
  color: #a396b5;
  margin: 0 10px;
}

.ite .iconfont {
  margin-right: 10px;
  padding-top: 10px;
  color: #c5c5cb;
}

.bg {
  height: 60px;
  background-color: #ffffff;
  margin-top: 10px;
}

.mhy-img {
  height: 35px;
  margin: 0 10px;
  /* background-color: red; */

  padding-top: 12px;
  display: flex;
}

.ba-img {
  width: 35px;
  height: 35px;
  /* background-color: orange; */

  display: flex;
}

.ba-img img {
  width: 100%;
}

.ml-10 {
  height: 35px;
  margin-left: 10px;
}

.ml-10 .mi {
  margin-left: 7px;

  background-color: #fffae4;
  color: #ffd889;
  padding: 0 4px;
  border-radius: 3px;
}

.ml-10 .shou {
  margin-top: 3px;
  color: #96a3c1;
}

.toul {
  margin-left: 179px;
  margin-top: 8px;
  color: #c8c8ce;
}

.tent {
  display: flex;
}

.box {
  width: 90px;

  /* background-color: red; */
  border: 1px solid #eff1f4;
}

.box img {
  width: 100%;
}

.mhy-price__integer {
  height: 90px;
  /* background-color: red; */
  margin-left: 5px;
}

.inter {
  padding-top: 24px;
  margin-left: 5px;
}

.inter .cutl-1 {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.inter .cutl-2 {
  font-size: 15px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.inter .number {
  margin-top: 3px;
  color: #9696a1;
}

.inter .mark {
  margin-top: 6px;
  color: #9696a1;
}

.pb-mini {
  margin-top: 22px;
}

/* .pb-mini ul{
    height: 250px;
    background-color: red;
   } */
.pb-mini li {
  width: 213px;
  height: 29px;
  background-color: #f3f3f4;
  margin-top: 10px;
  border-radius: 7px;
}

.copies {
  margin: 0 10px;
  line-height: 30px;
}

.hzi {
  width: 226px;
  height: 29px;
  background-color: #ffffff;
  margin-top: 10px;
  border-radius: 7px;
  text-align: center;
  border: 2px solid #ffc4c4;
}

.hzi span {
  line-height: 30px;
  color: #ff7575;
}

.order {
  height: 33px;
  /* background-color: red; */
  padding-top: 10px;
  border-top: 1px solid #f5f6f8;
  justify-content: space-between;
  display: flex;
}

.der {
  line-height: 30px;
}

.amout {
  line-height: 30px;
}

.bags {
  height: 37px;
  /* background-color: red; */
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
}

.bags .ags {
  height: 38px;
  width: 140px;
  background-color: #ffe9e9;
  text-align: center;
  border-radius: 18px;
  line-height: 37px;
  color: #ffaec2;
}

.bags .gs {
  height: 38px;
  width: 140px;
  background-color: #ff7474;
  border-radius: 18px;
  text-align: center;
  line-height: 37px;
  color: #ffffff;
}

.shop {
  width: 100%;

  background-color: #ffffff;
  margin-top: 10px;
}

.shoip {
  margin: 0 10px;
  line-height: 40px;
}

.inimgs img {
  width: 100%;
}

.inimgs {
  width: 100%;
  height: auto;
}
</style>
